import { message } from 'antd'
import { getMenus, login, logout } from '../api/user'
import { generateAccessRoutes } from '../utils/permission'
import {
  GEN_ACCESS_ROUTES,
  LOGIN_SUCCESS,
  LOGOUT_SUCCESS,
} from './action-type'

// 异步 action creator 函数
// 在函数体内部，返回一个新函数
// 该返回的函数会被 redux thunk 中间件 自动调用执行
// redux thunk 中间件在调用函数时，会传递 dispatch 作为参数

/**
 * 登录
 * @param {*} param0
 */
export const loginAsync = ({ username, password, remember }) => {
  return async (dispatch) => {
    try {
      // 在该函数中可以执行带 副作用 的操作，包括执行异常 ajax 请求

      const result = await login({
        username,
        password,
      })

      // 用户登录成功后，算出其能访问到的路由数组
      const menus = generateAccessRoutes(result.menus)

      // result 中保存用户登录成功的数据
      // 执行状态更新: dispatch(action)
      dispatch({
        type: LOGIN_SUCCESS,
        payload: {
          ...result,
          menus,
        },
      })

      // 数据持久化
      const storage = remember ? localStorage : sessionStorage
      storage.setItem('username', result.username)
      storage.setItem('avatarUrl', result.avatarUrl)
      storage.setItem('token', result.token)
      // storage.setItem('menus', JSON.stringify(result.menus))
    } catch (e) {
      message.error('用户名或密码错误！')
    }
  }
}

/**
 * 退出
 */
export const logoutAsync = () => async (dispatch) => {
  await logout()
  // dispatch(action) 更新状态数据
  dispatch({
    type: LOGOUT_SUCCESS,
  })
  // 清理 webstorage
  localStorage.clear()
  sessionStorage.clear()
  message.success('用户退出成功')
}

/**
 * 获取
 */
export const getMenuAsync = () => async (dispatch) => {
  const result = await getMenus()
  // 生成前端路由数组
  const menus = generateAccessRoutes(result.menus)
  dispatch({
    type: GEN_ACCESS_ROUTES,
    payload: {
      menus,
    },
  })
}
